<template>
  <div>
    <h3>房型增加</h3>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">房型名称</td>
          <td><input type="text" v-model="info.houseTypeName" /></td>
        </tr>
        <tr>
          <td align="right">房型图片</td>
          <td>
            <input type="file" @change="img" />
            <img
              :src="info.photo"
              width="100"
              height="100"
              v-if="info.photo != ''"
            />
          </td>
        </tr>
        <tr>
          <td align="right">房型面积</td>
          <td><input type="text" v-model="info.area" /></td>
        </tr>
        <tr>
          <td align="right">房型价格</td>
          <td><input type="text" v-model="info.price" /></td>
        </tr>
        <tr>
          <td align="right">最多入住人数</td>
          <td><input type="text" v-model="info.personCount" /></td>
        </tr>
        <tr>
          <td align="right">是否有窗</td>
          <td>
            <input
              type="radio"
              name="isWin"
              v-model="info.isWindow"
              :value="true"
            />有
            <input
              type="radio"
              name="isWin"
              v-model="info.isWindow"
              :value="false"
            />否
          </td>
        </tr>
        <tr>
          <td align="right">状态</td>
          <td>
            <input
              type="radio"
              name="state"
              v-model="info.state"
              :value="1"
            />发布
            <input
              type="radio"
              name="state"
              v-model="info.state"
              :value="0"
            />不发布
          </td>
        </tr>
        <tr>
          <td align="right"></td>
          <td>
            <input
              type="button"
              value="确定"
              class="btn btn-primary"
              @click="ok"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '@/stores/user';
const router = useRouter();
const route = useRoute();
const abc = useUserStore();

//增加操作时向后端传递的参数
let info: any = reactive({
  houseTypeName: '',
  photo: '',
  area: '',
  isWindow: true,
  personCount: '',
  price: '',
  state: 1,
});

onMounted(() => {
  if (abc.userInfo.id) {
  } else {
    router.push('/login');
  }
});

//图片上传
const img = (e: any) => {
  //e:表示事对象
  console.log(e);
  let obj = e.target.files[0];
  let f = new FormData();
  f.append('file', obj);

  axios({
    url: '/api/Upload/Upload',
    method: 'post',
    data: f,
  })
    .then((res) => {
      console.log(res);
      if (res.data == '不是图片格式') {
        alert('您上传的不是图片');
        return;
      }

      if (res.data == '大于2M') {
        alert('大于2M');
        return;
      }

      info.photo = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

//增加操作
const ok = () => {
  //1.有效性判断
  if (info.houseTypeName == '') {
    alert('名称不能为空');
    return;
  }
  if (info.photo == '') {
    alert('图片不能为空');
    return;
  }

  if (info.area == '') {
    alert('房型面积不为空');
    return;
  }

  let reg = /^(\+)?[1-9]\d*$/;
  if (reg.test(info.area) == false) {
    alert('房型面积正数');
    return;
  }

  if (info.price == '') {
    alert('房价不能为空');
    return;
  }

  if (reg.test(info.price) == false) {
    alert('房价只能是正数');
    return;
  }
  if (info.personCount == '') {
    alert('最多入住人数不能为空');
    return;
  }
  if (reg.test(info.personCount) == false) {
    alert('最多入住人数只能是正数');
    return;
  }
  //2.发送网络请求
  axios({
    url: '/api/HouseTypes/AddHouseType',
    method: 'post',
    data: info,
  })
    .then((res) => {
      console.log(res);
      if (res.data == -1) {
        alert('房型名称不能重复');
        return;
      }

      if (res.data > 0) {
        alert('房型增加成功');
        router.push('/houseTypeList');
        return;
      } else {
        alert('添加失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
